<template>
 <div style="background-color: #f7f7f7;">
    <div class="detail-header"></div>
    <van-cell class="approvalItem content">
      <div class="cell-content">
        <div class="content-img">
          <img :src="detailData.photo | imgPaths" alt="">
        </div>
        <div class="content-right">
          <div><div>{{ detailData.name }}</div><div style="text-align: center; border-radius: 2px;">{{ detailData.expertTitle&&detailData.expertTitle.title }}</div></div>
          <div class="font-style-common1"><div>地址:</div><div>
                 <span v-if="detailData.province!=null"> {{detailData.province.name}}</span>
                <span v-if="detailData.city!=null"> {{detailData.city.name}} </span>
                <span v-if="detailData.county!=null"> {{detailData.county.name}} </span>
            {{ detailData.address }}</div></div>
          <div class="font-style-common"><div style="margin-right: 60px;">提问量: {{ detailData.questionQuantity }}</div><div>回答量: {{ detailData.replyQuantity }}</div></div>
        </div>
      </div>
    </van-cell>
    <titlePanel title='擅长领域' style="margin-top: 71px;"></titlePanel>
   <!-- 擅长领域 -->
   <van-cell :border="false"><div class="font-style-common">{{ detailData.typeNames }}</div></van-cell>
   <titlePanel title='专家简介'></titlePanel>
   <van-cell :border="false"><div class="font-style-common">{{ detailData.expertIntroduce }}</div></van-cell>
   <titlePanel title='单位名称'></titlePanel>
   <van-cell :border="false"><div class="font-style-common">{{ detailData.workUnit }}</div></van-cell>

   <!-- <div class="btn-content" @click='goToAdd'>
    <div style="width: 22px;height: 22px;"><img style="width: 100%; height: 100%;" src="../../assets/img/login/btn-top.png" alt=""></div>
    <div>图文咨询</div>
   </div> -->
    <div  class="m-b-10 shop">
      <div @click="goToAdd" class="bottom col-37B5B5 font-16 line-height-2" style=" justify-content: center;
    flex-direction: column;">
    <div style="width: 22px;height: 22px;"><img style="width: 100%; height: 100%;" src="../../assets/img/login/btn-top.png" alt=""></div>
    <div>图文咨询</div>
      </div>
    </div>

 </div>
</template>

<script>
import { getValue,setValue } from '@/utils/auth'
import {Col,Row, Toast, Cell, CellGroup, Popup, Picker, DatetimePicker, PullRefresh, CheckboxGroup, List ,Search,DropdownMenu ,DropdownItem,Button } from 'vant'
import { getHandle, postHandle } from '@/api'
import titlePanel from '@/components/titlePanel'
 export default {
  name: '',
  data () {
   return {
    detailData: JSON.parse(getValue('expert-detail-obj'))
   }
  },
  methods: {
    goToAdd() {
      this.$bridge.call('expertQuestAdd')
    }
  },
  components: {
    titlePanel,
    [Cell.name]: Cell,
    [CellGroup.name]: CellGroup,
    [Popup.name]: Popup,
    [Picker.name]: Picker,
    [DatetimePicker.name]: DatetimePicker,
    [PullRefresh.name]: PullRefresh,
    [CheckboxGroup.name]: CheckboxGroup,
    [Toast.name]: Toast,
    [List.name]: List,
    [Search.name]: Search,
    [DropdownMenu.name]: DropdownMenu,
    [DropdownItem.name]: DropdownItem,
    [Col.name]: Col,
    [Row.name]: Row,
    [Button.name]: Button,
  }
 }
</script>

<style scoped lang="scss">
  .btn-content{
    display: flex;
    flex-direction: column;
    align-items: center;
    height: 68px;
    padding-top: 11px;
    padding-bottom: 8px;
    margin-top: 35px;
    background-color: #fff;
  }
  .btn-content>div:nth-child(2){
    font-size: 16px;
    font-weight: 400;
    color: #37B5B5;
  }
  .approvalItem{
    position: absolute;
    top: 10px;
    left: 15px;
    right: 15px;
  }
.detail-header{
  width: 375px;
  height: 64px;
  background-color: rgba(55, 181, 181, 1);
}
   .cell-content{
     padding-top: 15px;
    display: flex;
    .content-img{
      width: 54px;
      height: 54px;
      border-radius: 10px;
      overflow: hidden;
      img{
        width: 100%;
        height: 100%;
      }
    }
    .content-right{
      margin-left: 10px;
      &>div{
        display: flex;
        margin-bottom: 5px;
        div{
          margin-right: 10px;
        }
      }
      &>div:last-child{
        margin-bottom: 0;
      }
      &>div:first-child>div:first-child{
        color: #333333;
        font-weight: 500;
        color: #333333;
        font-size: 15px;
      }
      &>div:first-child>div:nth-child(2){
        width: 84px;
        height: 20px;
        box-sizing: border-box;
        background-color: rgba(55, 181, 181, 0.2);
        padding: 2px 6px;
        font-size: 12px;
        line-height: 20px;
        font-weight: 400;
        color: #37B5B5;
      }
    }
  }
  .font-style-common{
    font-size: 14px;
    font-weight: 400;
    color: #666666;
  }

   .font-style-common1{
    font-size: 12px;
    font-weight: 400;
    color: #666666;
  }
</style>
